<template>
  <div class="about">
    <h1>轮播图</h1>
      <div class="imgs">
      <div>
        <img
          v-for="(item, i) in data.imgs"
          :key="item"
          :src="item"
          alt=""
          v-show="i == index"
        />
      </div>
    </div>
    <div>
      <span
        @click="cut(item - 1)"
        class="page"
        v-for="item in data.page"
        :key="item"
        >{{ item }}</span
      >
    </div>
    <!-- <div>
      <button @click="up">上一张</button>
      <button @click="down">下一张</button>
    </div> -->
  
  </div>
</template>
<script setup>
import {ref,reactive} from 'vue'
const index=ref(0)
const dates=ref(null)
const data=reactive({
  imgs:['https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202101%2F10%2F20210110223341_5fb99.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681219463&t=39284be4d028c6e499eab612b7bb1d06',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201902%2F12%2F20190212200157_sgkvo.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681219463&t=13c20ed8425a4d0d03e8d45a8d9a7d4b',
        'https://inews.gtimg.com/newsapp_ls/0/14493232834/0',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202101%2F16%2F20210116175751_d09fc.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681219542&t=d8c122d59456c41c27039fa2d52c1eae'
  ],
  page:[1,2,3,4]
})

  //  cut=(i) =>{
  //     index.value = i;
    
  //   },
const  cut=(i)=>{
    index.value=i
  }
const    up=()=> {
      //上一张
      if (index.value == 0) {
        index.value = 2;
      } else {
        index.value--;
      }
    }
const  down=()=> {
      //下一张
    //    this.date =null
      if (index.value == 2) {
        index.value = 0;
      } else {
        index.value++;
      }
      datas.value =null
        data.value =setInterval(() => {
        index.value++
        if (index.value > 2) {
           index.value =0
        }
        console.log(index.value);
    },2000)      
   }
  

</script>
<style lang="scss" scoped>
.about {
  width: 100%;
  height: 90vh;
  margin: 0;
  padding: 0;
  background-color: #000;
  overflow: hidden;
  color: #fff;
  //   text-align: center;
}
img {
  width: 400px;
  height: 200px;
}
.page {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #c00;
  text-align: center;
  line-height: 30px;
  color: #fff;
  margin: 10px;
  border-radius: 50%;
}
.imgs {
  width: 400px;
  height: 200px;
  margin: 100px auto 10px;
}
</style>
